<template>
	<s-layout title="群聊详情" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="group-member ss-p-t-42 ss-p-b-30">
		<view class="member-list ss-flex ss-p-x-32">
			<view class="member-item ss-m-r-50" v-for="(item,index) in groupShowMemberList" :key="index"
				@click="jumpUser(item)">
				<view class="member-image-box">
					<image class="member-image"
						:src="sheep.$url.cdn(item.avatar) || 'http://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png'"
						mode="aspectFill"></image>
					<view class="member-fans" v-if="item.role_name">{{item.role_name}}</view>
					<view class="member-fans" v-else-if="item.child_im_id">铁粉</view>
				</view>
				<view class="member-name ss-line-1">{{item.nickname}}</view>
			</view>
			<view class="member-item ss-m-r-50" @click="add">
				<image class="member-image"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250108/7862f0f43fd9316d3cc7dc49de938f92.png"
					mode="aspectFill"></image>
				<view class="member-name ss-line-1"></view>
			</view>
			<view class="member-item ss-m-r-50" @click="deleteMember" v-if="isDelete">
				<image class="member-image"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250108/bd9eb1dc5764462c5196dc6da255d978.png"
					mode="aspectFill"></image>
				<view class="member-name ss-line-1"></view>
			</view>
		</view>
		<view class="member-more ss-flex justify-center align-center ss-m-t-30" @click="jumpMoreMember"
			v-if="groupMemberList.length > 3">
			<view>查看更多群成员</view>
			<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
		</view>
	</view>

	<view class="group-fun ss-m-t-14">
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" v-if="added.shop_name"
			@click="goShop">
			<view class="left">{{added.shop_name}}</view>
			<view class="right-text ss-flex justify-center align-center">
				<view>进入店铺</view>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="edit">
			<view class="left">群聊名称</view>
			<view class="right-text ss-flex justify-center align-center">
				<view>{{title}}</view>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="groupCode">
			<view class="left">群二维码</view>
			<view class="right-image ss-flex justify-center align-center">
				<image class="right-code"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250108/8e7031fef851cbfb247f394c79ae9153.png">
				</image>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="edit">
			<view class="left">群头像</view>
			<view class="right-image ss-flex justify-center align-center">
				<image class="right-logo"
					:src="sheep.$url.cdn(avatar) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'"
					mode="aspectFill"></image>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="edit">
			<view class="left">群公告</view>
			<view class="right-text ss-flex justify-center align-center">
				<view>{{notification ? '' : '未设置'}}</view>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<!-- 		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25">
			<view class="left">消息免打扰</view>
			<switch @change="changeMessage" color="#47C262" style="transform:scale(0.7)" />
		</view> -->
		<view class="group-item ss-flex justify-between align-center ss-p-x-25">
			<view class="left">置顶聊天</view>
			<switch :checked="top" @change="changeTop" color="#47C262" style="transform:scale(0.7)" />
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="editMyInfo">
			<view class="left">我在本群的昵称</view>
			<view class="right-text ss-flex justify-center align-center">
				<view>{{myUserInfo.nickname}}</view>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="group-item ss-flex justify-between align-center bb ss-p-x-25" @click="editMyInfo">
			<view class="left">我在本群的头像</view>
			<view class="right-image ss-flex justify-center align-center">
				<image class="right-logo"
					:src="sheep.$url.cdn(myUserInfo.avatar) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'"
					mode="aspectFill"></image>
				<uni-icons type="right" size="18" color="#D8D8D8"></uni-icons>
			</view>
		</view>
	</view>

	<view class="clear-record ss-m-t-14 ss-p-l-25" @click="clear">清空聊天记录</view>
	<view class="quit-box" v-if="groupInfo.groupProfile.selfInfo.role !== 'Owner'">
		<view class="quit" @click="quit">退出群聊</view>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'

	const groupShowMemberList = ref([]) // 显示的部分群员
	const groupMemberList = ref([]) //全部的群成员
	const deleteUserList = ref([]) //可删除的群成员
	const notification = ref('') //公告
	const title = ref('') // 标题
	const avatar = ref('') //头像
	const added = ref({})
	const top = ref(false)

	const iMMyInfo = computed(() => $store().userInfo);
	const groupInfo = computed(() => $store().groupInfo);
	const isDelete = computed(() => {
		// 当用户角色不是普通用户以及群聊人数大于1时才能显示
		if ((groupInfo.value && groupInfo.value.groupProfile.selfInfo && groupInfo.value.groupProfile.selfInfo
				.role !== 'Member') && deleteUserList.value
			.length >= 1) {
			return true
		}
		return false
	})

	const myUserInfo = reactive({
		avatar: '',
		nickname: ''
	})

	onLoad((opt) => {
		notification.value = groupInfo.value.groupProfile.notification
		title.value = groupInfo.value.groupProfile.name
		avatar.value = groupInfo.value.groupProfile.avatar
		getTop()
		getInfo()
		// 监听修改资料事件
		uni.$on('updateGroup', function(data) {
			notification.value = data.notification
			title.value = data.name
			avatar.value = data.avatar
		})
	});

	onShow(() => {
		getMember()
	})

	onUnload(() => {
		uni.$off('updateGroup')
	})

	const editMyInfo = () => {
		uni.navigateTo({
			url:'/im/pages/setMyInfo',
			events: {
				setMyInfo: function(data) {
					myUserInfo.avatar = data.avatar
					myUserInfo.nickname = data.nickname
				},
			},
			success: function(res) {
			    // 通过eventChannel向被打开页面传送数据
			    res.eventChannel.emit('getMyInfo', { data: myUserInfo })
			  }
		})
	}

	const clear = () => {
		uni.showModal({
			title: '提示',
			content: '删除聊天记录将无法恢复，请确认删除!',
			cancelText: '取消',
			confirmText: '确认删除',
			async success(res) {
				if (res.confirm) {
					const {
						code
					} = await imApi.clearGroupMsg({
						group_id: groupInfo.value.groupProfile.groupID,
						from_account: iMMyInfo.value.userID
					})
					if (code === 0) {
						$store().clear()
					}
				}
			}
		});
	}

	const getInfo = async () => {
		const {
			code,
			data
		} = await imApi.groupInfo({
			group_id: groupInfo.value.groupProfile.groupID,
			im_id: iMMyInfo.value.userID
		})

		if (code === 0) {
			myUserInfo.avatar = data.user.avatar
			myUserInfo.nickname = data.user.nickname
			data.AppDefinedData.map(item => {
				added.value[item.Key] = item.Value
			})
		}
	}

	const getTop = async () => {
		const {
			code,
			data
		} = await imApi.getTop({
			type: 'group',
			group_id: groupInfo.value.groupProfile.groupID,
			from_account: iMMyInfo.value.userID,
			to_account: '',
		})

		if (code === 0) {
			if (data.status === 1) {
				top.value = true
			} else {
				top.value = false
			}
		}
	}

	const getMember = async () => {
		const {
			code,
			data
		} = await imApi.memberList({
			type: uni.getStorageSync('udid') === 'hotel' ? 'hl' : uni.getStorageSync('udid'),
			group_id: groupInfo.value.groupProfile.groupID,
		})
		if (code === 0) {
			deleteUserList.value = data.filter(item => {
				// 本人和群主不在删除范围 需要去除
				return item.im_id !== iMMyInfo.value.userID && item.identifier !== 1
			})
			groupShowMemberList.value = data.slice(0, isDelete.value ? 3 : 4)
			groupMemberList.value = data

		}
	}

	const goShop = () => {
		if (uni.getStorageSync('udid') === 'mc') {
			window.jWeixin.miniProgram.redirectTo({
				url: added.value.shop_url
			})
		} else {
			uni.showToast({
				title: '请前往指定平台进入店铺!',
				icon: 'none',
				duration: 2000
			});
		}
	}

	const edit = () => {
		if (groupInfo.value.groupProfile.selfInfo.role === 'Member') {
			return uni.showToast({
				title: '暂无权限!',
				duration: 1500,
				icon: 'none'
			})
		}
		sheep.$router.go('/im/pages/groupEdit')
	}

	const groupCode = () => {
		sheep.$router.go('/im/pages/groupCode')
	}

	const add = () => {
		sheep.$router.go('/im/pages/addMember')
	}

	const quit = () => {
		wx.showModal({
			title: '提示',
			content: '是否确定退出群聊？',
			async success(res) {
				if (res.confirm) {
					const {
						code
					} = await imApi.quitGroup({
						type: uni.getStorageSync('udid') === 'hotel' ? 'hl' : uni.getStorageSync(
							'udid'),
						group_id: groupInfo.value.groupProfile.groupID,
						im_id: iMMyInfo.value.userID,
					})
					if (code === 0) {
						uni.showToast({
							title: '退群成功',
							duration: 800
						})
						const pages = getCurrentPages()
						const index = pages.findIndex(item => item.route === 'pages/im/index')
						if (index !== -1) {
							pages.splice(index, 1)
							await $store().resetMessageList()
							setTimeout(() => {
								uni.navigateBack({
									delta: pages.length
								})
							}, 800)
						} else {
							uni.reLaunch({
								url: '/im/pages/index'
							})
						}
					}
				}
			}
		})
	}

	const changeMessage = (e) => {
		console.log(e)
	}

	const changeTop = async (e) => {
		const {
			code
		} = await imApi.setTop({
			type: 'group',
			group_id: groupInfo.value.groupProfile.groupID,
			from_account: iMMyInfo.value.userID,
			to_account: '',
		})

		if (code === 0) {
			$store().setTop(groupInfo.value.groupProfile.groupID, top.value == 1 ? 0 : 1)
			uni.showToast({
				title: '设置成功',
				duration: 1000,
				icon: 'none'
			})
		}
	}


	const deleteMember = () => {
		if (groupInfo.value.groupProfile.selfInfo.role === 'Member') {
			return uni.showToast({
				title: '暂无权限!',
				duration: 1500,
				icon: 'none'
			})
		}
		sheep.$router.go('/im/pages/deleteMember')
	}

	const jumpUser = (item) => {
		if (item.im_id === iMMyInfo.value.userID) {
			return
		}
		$store().getFriendInfo(`C2C${item.im_id}`, 'group')
	}

	const jumpMoreMember = () => {
		sheep.$router.go('/im/pages/groupUserList')
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.group-member {
		width: 100%;
		background: #FFFFFF;

		.member-list {
			width: 100%;

			.member-item {
				width: 92rpx;

				.member-image {
					width: 92rpx;
					height: 92rpx;
					border-radius: 8rpx;
				}

				.member-name {
					height: 34rpx;
					line-height: 34rpx;
					font-weight: 350;
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					margin-top: 10rpx;
				}

				.member-image-box {
					width: 92rpx;
					height: 92rpx;
					border-radius: 8rpx;
					position: relative;

					.member-fans {
						width: 54rpx;
						height: 32rpx;
						background: rgba(0, 0, 0, 0.4);
						border-radius: 4rpx 4px 4px 4px;
						position: absolute;
						bottom: 0;
						left: 20rpx;
						font-weight: 300;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: center;
					}
				}


			}
		}

		.member-more {
			font-weight: 350;
			font-size: 24rpx;
			color: #8B8B8B;
		}
	}

	.group-fun {
		background-color: #fff;

		.group-item {
			height: 106rpx;

			.left {
				font-weight: 350;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.right-text {
				font-weight: 350;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.right-image {
				.right-code {
					width: 40rpx;
					height: 40rpx;
				}

				.right-logo {
					width: 56rpx;
					height: 56rpx;
					border-radius: 8rpx;
				}
			}
		}
	}

	.clear-record {
		width: 100%;
		height: 106rpx;
		background: #FFFFFF;
		font-weight: 350;
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 106rpx;
	}

	.quit {
		width: 100%;
		height: 106rpx;
		background: #FFFFFF;
		font-weight: 350;
		font-size: 28rpx;
		color: #FA4848;
		line-height: 106rpx;
		text-align: center;
		margin-top: 150rpx;

	}

	.quit-box {
		background-color: #F6F6F6;
		padding-bottom: 200rpx;
	}

	.bb {
		border-bottom: 1rpx solid #F1F1F1;
	}
</style>